<template>
  <div class="recommend-wrapper">
     <div class="recommend-title">周末一日游</div>
     <ul class="recommend-list">
       <li class="item" v-for="item of weekendList" :key="item.id">
         <div class="item-img-wrapper">
           <img class="item-img" :src="item.imgUrl" alt="">
         </div>
         <div class="item-info">
            <p class="item-info-title">{{item.title}}</p>
            <p class="item-info-desc">
             {{item.desc}}
            </p>
         </div>
       </li>
     </ul>
  </div>
</template>
<script>
export default {
  name: "HomeRecommend",
  props:{
    weekendList:Array
  },
  data() {
    return {
      
    };
  }
};
</script>
<style lang="scss" scoped>
@import "~style/public.scss";
.recommend-wrapper {
    margin-top: .2rem;
  .recommend-title {
    text-indent: 0.2rem;
    height: 0.8rem;
    line-height: 0.8rem;
    background: #ccc;
  }
  .item {
    .item-img-wrapper {
      width: 100%;
      height: 0rem;
      padding-bottom:36.9%;
      .item-img{
          width: 100%;
      }
    }
    .item-info {
      min-width: 0;
      padding: 0.2rem 0rem;
      background: #eee;
      .item-info-title {
        margin-top: 0.2rem;
        font-size: 0.35rem;
        line-height: 0.44rem;
        @include ellipse();
      }
      .item-info-desc {
        font-size: 0.3 rem;
        line-height: 0.34rem;
        @include ellipse();
      }
    }
  }
}
</style>
